<template>
    <div class="cart-contain">
        <h2>---------购物车---------</h2>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>我的购物车</span>
                <span style="float: right; padding-right:10px">操作</span>
            </div>
            <el-checkbox-group v-model="checkList">
                <div class="cart-item" v-for="item in cartList" :key="item.title">
                    <div class="item-left">
                        <el-checkbox :label="item.id" :checked="item.checked" @change="goodsCheckedChange(item)">
                            {{""}}
                        </el-checkbox>
                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                             alt="">
                        <span class="title">{{item.title}}</span>
                    </div>
                    <div class="item-right">
                        <p class="info">
                            小计：<span class="price">￥{{item.price*item.count}}</span>
                        </p>
                        <div class="goods-change">
                            <el-input-number v-model="item.count" @change="goodsNumChanged(item)" :min="1" :max="10"
                                             label="描述文字"
                            ></el-input-number>
                            <el-button type="danger" @click="goodsDelete(item.id)">删除</el-button>
                        </div>
                    </div>
                </div>
            </el-checkbox-group>

            <div class="total">
                <div class="total-left">
                    <el-checkbox v-model="isCheckedAll">全选</el-checkbox>
                    <div class="total-price">总计:￥{{totalPrice}}</div>
                </div>
                <div class="total-right">
                    <el-button type="primary" @click="toPay">结算</el-button>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
    import {mapState, mapMutations, mapGetters} from 'vuex'
    import * as ACTION from '@/store/modules/cart/actions'

    export default {
        name: "index",
        data() {
            return {
                checkList: [],
            }
        },
        methods: {
            //1.修改商品数量
            goodsNumChanged(val) {
                this.updateGoodsNum(val);
            },
            //2.修改商品选中状态
            goodsCheckedChange(val) {
                val.checked = !val.checked;
                this.updateGoodsChecked(val);
            },
            //3.删除商品
            goodsDelete(val) {
                this.$confirm('确认删除该商品？')
                    .then(_ => {
                        this.deleteGoods(val);
                        const checkedIndex = this.checkList.findIndex(item => item === val);
                        if (checkedIndex !== -1) {
                            this.checkList.splice(checkedIndex, 1);
                        }
                    })
                    .catch(_ => {
                    });
            },
            //4.结算商品
            toPay() {
                this.$alert(`你的结算总金额为: ${this.totalPrice}元`, {
                    confirmButtonText: '确定'
                });
            },
            ...mapMutations('cart/', {
                updateGoodsNum: ACTION.UPDATEGOODSNUM,
                updateGoodsChecked: ACTION.UPDATEGOODSCHECKED,
                setAllChecked: ACTION.SETALLCHECKED,
                deleteGoods: ACTION.DELETEGOODS
            })
        },
        computed: {
            //检测是否全选
            isCheckedAll: {
                set(value) {
                    this.setAllChecked(value);
                    if (value) {
                        this.checkList = this.cartList.map(item => item.id)
                    } else {
                        this.checkList = [];
                    }
                },
                get() {
                    return this.checkList.length === this.cartList.length;
                }
            },
            ...mapState('cart/', ["cartList"]),
            ...mapGetters('cart/', ["totalPrice"])
        }
    }
</script>

<style lang="less">
    .cart-contain {
        h2 {
            margin: 20px 0;
            text-align: center;
            font-size: 25px;
            color: #F97F51;
            font-family: '华文行楷';
        }

        .box-card {
            width: 60%;
            margin: 0 auto;

            .el-checkbox-group {
                font-size: 14px;
            }

            .cart-item {
                display: flex;
                justify-content: space-between;
                margin: 10px 0;

                .item-left {
                    img {
                        width: 50px;
                        height: 50px;
                        vertical-align: middle;
                        border-radius: 5px;
                    }

                    .title {
                        margin-left: 10px;
                    }
                }

                .item-right {
                    margin: auto 0;
                    display: flex;

                    .info {
                        margin: auto 0;
                    }

                    .el-input-number {
                        width: 150px;
                        margin: 0 10px;
                    }

                }

            }

            .total {
                display: flex;
                justify-content: space-between;

                .total-left {
                    margin: auto 0;
                }
            }
        }
    }
</style>